<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <style>
      .centered {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .table {
        display: inline !important;
      }
    </style>
  </head>
  <body>
    <div id="app" class="container">
      <div class="row">
        <div class="col text-center mt-5">
          <table class="table table-striped table-inverse table-responsive">
            <thead class="thead-inverse">
              <th v-for="(item,index) in stuList.tabletitle" :key="index">
                {{ item }}
              </th>
            </thead>
            <tbody>
              <tr v-for="item in stuList.list" :key="item._id">
                <td scope="row">{{ item.name }}</td>
                <td scope="row">{{ item.hobbies }}</td>
                <td scope="row">{{ item._id }}</td>
                <td scope="row">{{ item.age }}</td>
                <td scope="row">{{ item.sex }}</td>
                <td scope="row">{{ item.class }}</td>
                <td scope="row">{{ item.score }}</td>
              </tr>
            </tbody>
          </table>
          <nav aria-label="Page navigation example" class="centered">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="page-item" v-for="(i) in page.pagenum" :key="i">
                <a class="page-link" href="#" @click="changePage(i)">{{i}}</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          page: {
            cnum: 0,
            csize: 4,
            pagenum: 0,
            pagesize: 0,
            currentpage: 1,
            currentsize: 4,
          },
          stuList: {},
        },
        methods: {
          getData() {
            fetch("http://localhost:3000/findStudents")
              .then((response) => response.json())
              .then((res) => {
                console.log(res.data);
                this.$set(this.stuList, "list", res.data);
                this.page.pagesize = res.data.length;
                this.page.pagenum = Math.ceil(
                  res.data.length / this.page.currentsize
                );
                let machData = JSON.stringify(res.data[0]);
                machData = machData.replace(/_id/g, "id");
                machData = machData.replace(/name/g, "姓名");
                machData = machData.replace(/age/g, "年龄");
                machData = machData.replace(/hobbies/g, "爱好");
                machData = machData.replace(/sex/g, "性别");
                machData = machData.replace(/class/g, "班级");
                machData = machData.replace(/score/g, "分数");
                let tabletitle = [];
                for (const key in JSON.parse(machData)) {
                  tabletitle.push(key);
                }
                tabletitle = tabletitle.slice(0, tabletitle.length - 1);
                console.log(tabletitle);
                // let tabletitle2 = [];
                // for (const key in res.data[0]) {
                //   let obj = {};
                //   tabletitle.map((item) => {
                //     obj[key] = item;
                //   });
                //   tabletitle2.push(obj);
                // }
                // console.log(tabletitle2);
                this.$set(this.stuList, "tabletitle", tabletitle);
              })
              .catch((e) => console.log("Oops, error", e));
          },
          changePage(i) {
            this.page.currentpage = i;
            this.cnum = (this.page.currentpage - 1) * this.page.currentsize;
            this.csize = this.page.currentpage * this.page.currentsize;
          },
        },
        created() {
          this.getData();
        },
      });
    </script>
  </body>
</html>
